$(function(){
	//获取最新时间
	var maxHour;
	var maxMinutes;
	var maxDay;
	var maxsubHour;
	var maxsubDay;
	var maxsubMinutes;
	var maxTimeAjax = new $ax(Feng.ctxPath + "/bigSrceen/maxTime?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId,
	    function (data) {
			data = eval("("+data+")");
			maxsubHour = data.submaxHourTime;
			maxsubDay = data.submaxDayTime;
			maxsubMinutes = data.subminutesTime;
			maxHour = data.hourTime;
			maxDay = data.dayTime;
			maxMinutes = data.minutesTime;
	    },
	    function (data) {
	        alert("网络繁忙，请稍后再试！");
	    });
	maxTimeAjax.start();
	
    //性别分布
    function getSexPieOption(data){
        return {
            title : {
//                text: '性别比例',
                text: "性别比例",
                
//                textStyle: {
//                	formatter: ['{aaa| 性别比例}'].join('\n'),
//			        rich: {
//			        	aaa: {
//			        		backgroundColor: {
//			                    image: '../../../img/hyh.png'
//			                },
////			                backgroundColor: '#4DD3E2',
//			                height: 100,
//			            },
//			            b: {
//			            	backgroundColor: '#F0F8FF',
//			                height: 40
//			            },
//			        },
//                },
                
                
                x: 'left',
                //垂直安放位置，默认为全图底部('bottom')，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                // y: '50px',
                textStyle:{
                    color:"#F0F8FF"
                }
            },
            color:['#F0F8FF','#4DD3E2'], 
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series : [
                {
                    name: '性别比例',
                    type: 'pie',
                    radius : '50%',
                    center: ['45%', '55%'],
                    data:data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 20,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }
    //性别分布请求
    var sexAjax;
    var sex_pie_option;
    var sex_pie;
    function sex(){
        sexAjax = new $ax(Feng.ctxPath + "/bigSrceen/sex?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxHour="+maxHour+"&maxsubHour="+maxsubHour,
            function (data) {
                sex_pie_option=getSexPieOption(eval("("+data+")"));
                sex_pie=echarts.init(document.getElementById("sex_pie"));
                sex_pie.setOption(sex_pie_option,true);
            },
            function (data) {
                alert("网络繁忙，请稍后再试！");
            });
        sexAjax.start();
    }
    sex();
    //循环执行
    setInterval(function () {
        sex_pie.dispose();
        $("#sex_pie").html("");
        sex();
    },60*1000);
    //},60*1000);

    //外省用户数分布
    function getOuterNumOption(yAxis,data){
        return {
            title: {
                text: '外省用户数',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                borderWidth:'0'
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine:{
                    show:false
                },
                axisLabel: {        
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize:'6'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#FFFFFF',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
                show: true
            },
            yAxis: {
                type: 'category',
                data: yAxis,
                splitLine:{
                    show:false
                },
	            axisLabel: {        
	                show: true,
	                textStyle: {
	                    color: '#FFFFFF',
	                    fontSize:'6'
	                }
	            },
	            axisLine:{
                    lineStyle:{
                        color:'#FFFFFF',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
            },
            series: [
                {
                    name: '外省用户数',
                    type: 'bar',
                    data: data,
                    itemStyle:{
                        normal:{
                            color:'#4169E1'
                        }
                    }
                }
            ]
        };
    }
    var outsideUserAjax;
    var outer_num_bar_option;
    var outer_num_bar;
    function outsideUser(){
        outsideUserAjax = new $ax(Feng.ctxPath + "/bigSrceen/outsideUser?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxHour="+maxHour+"&maxsubHour="+maxsubHour,
            function (data) {
        		var data = eval("("+data+")");
        		var nameArray = [];
        		var valueArray = [];
        		for (var i = 0; i < data.length; i++) {
        			nameArray.push(data[i].name);
        			valueArray.push(data[i].value);
        		}
                outer_num_bar_option=getOuterNumOption(nameArray,valueArray);
                outer_num_bar=echarts.init(document.getElementById("outer_num_bar"))
                outer_num_bar.setOption(outer_num_bar_option,true);
            },
            function (data) {
                alert("网络繁忙，请稍后再试！");

            });
        outsideUserAjax.start();
    }
    outsideUser();
    setInterval(function () {
        outer_num_bar.dispose();
        $("#outer_num_bar").html("");
        outsideUser();
    },60*1000);

    //历史人数
    //获取近15天日期
//    for(var i=1;i<=15;i++){
//        var lw = new Date(new Date() - 1000 * 60 * 60 * 24 * i);
//        var lastM = lw.getMonth()+1;
//        var lastD = lw.getDate();
//        var startdate=(lastM<10 ? "0" + lastM : lastM)+"/"+(lastD<10 ? "0"+ lastD : lastD);//N天之前日期
//        historyCalender.push(startdate);
//    }
//    historyCalender.sort(function(a,b){
//        return a.replace("/","")-b.replace("/","");
//    });

    function getHistoryNumOption(historyCalender,historyNums){
        return {
            title: {
                text: '历史人数',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    color: '#708090'
                }
            },
            grid: {show:'true',borderWidth:'0'},
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: historyCalender,
                axisLabel: {        
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize:'6'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#5F9EA0',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
                splitLine:{
                    show:false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                },
                axisPointer: {
                    snap: true,
                },
                axisLabel: {        
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize:'6'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#5F9EA0',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
                splitLine:{
                    show:false
                }
            },
            series: [
                {
                    name:'人数',
                    type:'line',
                    smooth: true,
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                color:'#4169E1'
                            }
                        }
                    },
                    data: historyNums
                }
            ]
        };
    }
    
    var historyNumLineAjax;
    var history_num_line_option;
    var history_num_line;
    
    function historyNumLine(){
    	var historyCalender=[],historyNums=[];
    	historyNumLineAjax = new $ax(Feng.ctxPath + "/bigSrceen/historyNumLine?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxDay="+maxDay+"&maxsubDay="+maxsubDay,
        function (data) {
    		var data = eval("("+data+")");
    		for (var i = 0; i < data.length; i++) {
    			historyCalender.push(data[i].date);
    			historyNums.push(data[i].value);
    		}
    		history_num_line_option=getHistoryNumOption(historyCalender,historyNums);
    		history_num_line=echarts.init(document.getElementById("history_num_line"))
            history_num_line.setOption(history_num_line_option,true);
        },
        function (data) {
            alert("网络繁忙，请稍后再试！");

        });
    	historyNumLineAjax.start();
    }
    historyNumLine();
    setInterval(function () {
        history_num_line.dispose();
        $("#history_num_line").html("");
        historyNumLine();
    },60*1000);
    
    //实时用户数趋势
    function getRealTimeNumLineOption(realNumsCalender,realNums){
        return {
            title: {
                text: '实时用户数趋势',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: realNumsCalender,
                splitLine:{
                    show:false
                },
                
                axisLabel: {        
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize:'6'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#5F9EA0',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
            
            },
            yAxis: {
                type: 'value',
                splitLine:{
                    show:false
                },
                axisPointer: {
                    snap: true
                },
                
                axisLabel: {        
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize:'6'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#5F9EA0',
                          width:1,                  //这里是坐标轴的宽度
                    }
                },
            },
            grid: {show:'true',borderWidth:'0'},
            series: [{
                data: realNums,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#4169E1'
                    }
                },
                areaStyle: {
                    normal: {}
                }
            }]
        };
    }
    
    var realTimeNumLineAjax;
    var realtime_num_line_option;
    var realtime_num_line;
    
    function realTimeNumLine(){
    	var realNumsCalender = [];
        var realNums =[];
    	realTimeNumLineAjax = new $ax(Feng.ctxPath + "/bigSrceen/realTimeNumLine?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxMinutes="+maxMinutes+"&maxsubMinutes="+maxsubMinutes,
        function (data) {
    		var data = eval("("+data+")");
    		for (var i = 0; i < data.length; i++) {
    			realNumsCalender.push(data[i].date);
    			realNums.push(data[i].value);
    		}
    		realtime_num_line_option=getRealTimeNumLineOption(realNumsCalender,realNums);
    		realtime_num_line=echarts.init(document.getElementById("realtime_num_line"))
            realtime_num_line.setOption(realtime_num_line_option,true);
        },
        function (data) {
            alert("网络繁忙，请稍后再试！");

        });
    	realTimeNumLineAjax.start();
    }
    realTimeNumLine();
    setInterval(function () {
        realtime_num_line.dispose();
        $("#realtime_num_line").html("");
        realTimeNumLine();
    },60*1000);

    //人口分布统计
    function getPopulationDisOption(data){
        return {
            title : {
                text: '人口分布',
                x: 'left',
                //垂直安放位置，默认为全图底部('bottom')，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                // y: '50px',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            color:['#F0F8FF','#4DD3E2'], 
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series : [
                {
                    name: '人口分布',
                    type: 'pie',
                    radius : '50%',
                    center:  ['45%', '55%'],
                    data:data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 20,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }
    
    var populationDisAjax;
    var population_dis_pie_option;
    var population_dis_pie;
    
    function populationDis(){
    	var populationDis = [];
        var citys =[];
        populationDisAjax = new $ax(Feng.ctxPath + "/bigSrceen/populationDis?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxHour="+maxHour+"&maxsubHour="+maxsubHour,
        function (data) {
    		var data = eval("("+data+")");
    		population_dis_pie_option=getPopulationDisOption(data);
    	    population_dis_pie=echarts.init(document.getElementById("native_num_line"))
    	    population_dis_pie.setOption(population_dis_pie_option,true);
        },
        function (data) {
            alert("网络繁忙，请稍后再试！");

        });
    	populationDisAjax.start();
    }
    populationDis();
    setInterval(function () {
        population_dis_pie.dispose();
        $("#native_num_line").html("");
        populationDis();
    },60*1000);

    //用户年龄段分布
    function getAgePieOption(ages,values){
        return {
            title: {
                text: '用户年龄段分布',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                y: 'center',    //延Y轴居中
                x: 'right', //居右显示
                textStyle:{    //图例文字的样式
                    color:"#FFFFFF",
                    fontSize:12
                },
                data:ages
            },
//            #862EF7,#54F5F5,#2078E5,#6FF181,#9958FB,#4169E1
            color:['#862EF7','#54F5F5','#2078E5','#6FF181','#9958FB','#4169E1'],
//            color:['#3366FF','#00FF00','#FFFFFF','#0000FF','#FFFF77','#BBFF00'],
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:values
                }
            ]
        };
    }
    
    var agePieAjax;
    var age_pie_option;
    var age_pie;
    
    function agePie(){
    	var ages = [];
        var values = [];
        agePieAjax = new $ax(Feng.ctxPath + "/bigSrceen/agePie?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxHour="+maxHour+"&maxsubHour="+maxsubHour,
        function (data) {
    		var data = eval("("+data+")");
    		for (var i = 0; i < data.length; i++) {
    			ages.push(data[i].name);
    			values.push(data[i].value);
    		}
    	    age_pie_option=getAgePieOption(ages,data);
    	    age_pie=echarts.init(document.getElementById("age_pie"))
    	    age_pie.setOption(age_pie_option,true);
        },
        function (data) {
            alert("网络繁忙，请稍后再试！");
        });
        agePieAjax.start();
    }
    agePie();
    setInterval(function () {
        age_pie.dispose();
        $("#age_pie").html("");
        agePie();
    },60*1000);

    //省内用户数
    function getInnerNumBarOption(innerNums,citys){
        return {
            title : {
                text: '省内用户数',
                textStyle:{
                    color:"#FFFFFF"
                }
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : citys,
                    splitLine:{
                        show:false
                    },
                    axisLabel: {        
                        show: true,
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize:'6'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#5F9EA0',
                              width:1,                  //这里是坐标轴的宽度
                        }
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitLine:{
                        show:false
                    },
                    axisLabel: {        
                        show: true,
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize:'6'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#5F9EA0',
                              width:1,                  //这里是坐标轴的宽度
                        }
                    },
                }
            ],
            grid: {show:'true',borderWidth:'0'},
            series : [
                {
                    name:'人数',
                    type:'bar',
                    data:innerNums,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    },
                    itemStyle:{
                        normal:{
                            color:'#4169E1'
                        }
                    }
                }
            ]
        };
    }
    
    var innerNumsAjax;
    var inner_num_bar_option;
    var inner_num_bar;
    
    function innerNums(){
    	var nums = [];
        var citys = [];
        innerNumsAjax = new $ax(Feng.ctxPath + "/bigSrceen/innerNums?areaId="+window.opener.areaId+"&subAreaId="+window.opener.subAreaId+"&maxHour="+maxHour+"&maxsubHour="+maxsubHour,
        function (data) {
    		var data = eval("("+data+")");
    		for (var i = 0; i < data.length; i++) {
    			nums.push(data[i].value);
    			citys.push(data[i].name);
    		}
    		inner_num_bar_option=getInnerNumBarOption(nums,citys);
    		inner_num_bar=echarts.init(document.getElementById("inner_num_bar"))
    	    inner_num_bar.setOption(inner_num_bar_option,true);
        },
        function (data) {
            alert("网络繁忙，请稍后再试！");
        });
        innerNumsAjax.start();
    }
    innerNums();
    setInterval(function () {
        inner_num_bar.dispose();
        $("#inner_num_bar").html("");
        innerNums();
    },60*1000);
});